import React, { useState, useEffect } from 'react'
import Header from '../../components/header/Header'
import './youhui.css'
import { reqgetcoupon } from '../../request/api'
import moment from 'moment'
export default function Youhui() {
    const [n, changen] = useState(0)
    const [list, getlist] = useState([])
    useEffect(() => {
        reqgetcoupon().then(res => {
            getlist(res.data.list)
        })
    }, [])
    // console.log(list);
    return (
        <div className='Yhuijuan'>
            <Header title='优惠券'></Header>
            <div className='content'>
                <div className="nav">
                    <ul>
                        <li onClick={() => changen(0)} className={n === 0 ? 'select' : ''}>未使用</li>
                        <li onClick={() => changen(1)} className={n === 1 ? 'select' : ''}>已使用</li>
                        <li onClick={() => changen(2)} className={n === 2 ? 'select' : ''}>已失效</li>
                    </ul>
                </div>
            </div>
            <div className='yhj'>
                {list.length > 0 ?
                    list[n].content.map(item => (
                        <div className='youhuijuan' key={item.id} key={item.id}>
                            <div className="shang">
                                <div className="you">
                                    <p>￥<span>{item.money}</span></p>
                                    <span>满{item.limit_money}元可用</span>
                                </div>
                                <div className="zuo">
                                    <p>{item.title}</p>
                                    <span>{moment(parseInt(item.begintime)).format('YYYY-MM-DD')} 至 {moment(parseInt(item.endtime)).format('YYYY-MM-DD')} </span>
                                </div>
                            </div>
                            <div className="xia">{item.description}</div>
                        </div>
                    )) : null
                }
            </div>
        </div>
    )
}
